<template>
<a-modal
      :title="isAdd?'新增':'编辑'"
      :visible="visible"
      @ok="onSubmit"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
    >
    <a-form-model
      ref="ruleForm"
      :model="form"
    >
    <a-form-model-item label="父级菜单">
      <a-select
      @input="change"
        v-model="form.parentId"
      >
      <a-select-option v-for="(item,i) in rootMenu" :key="i" :value="item.id">{{item.nameZh}}</a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="菜单名称">
      <a-input
      @input="change"
        v-model="form.nameZh"
      />
    </a-form-model-item>
    <a-form-model-item label="配置地址">
      <a-input @input="change" v-model="form.url"/>
      </a-form-model-item>
      <a-form-model-item label="配置文件路径">
      <a-input @input="change" v-model="form.filePath"/>
    </a-form-model-item>
    <a-form-model-item label="排序标识">
      <a-input
      @input="change"
        type="number"
        v-model="form.sortCode"
      />
    </a-form-model-item>
    <a-form-model-item label="图标">
      <a-select thx v-model="form.icon" placeholder="选择你需要的图标" showSearch>
        <a-select-option v-for="(item,i) in icons" :value="item" :key="i">
          <i :class="item" aria-hidden="true" :style="{marginLeft: '5px',width: '30px'}"></i><span :style="{marginLeft:'5px'}">{{item}}</span>
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <a-form-model-item label="禁用/启用">
      <a-switch @input="change" v-model="form.isDisable" checkedChildren="禁用" unCheckedChildren="启用"/>
    </a-form-model-item>
  </a-form-model>
</a-modal>
</template>

<script>
import icons from './icon'
import {save,update,menu} from './api'
export default {
data() {
    return {
      isAdd:false,
      visible: false,
      icons:new Set(icons),
      confirmLoading: false,
      other: '',
      form: {isDisable:false},
      rootMenu:[]
    };
  },
  methods: {
    change(){
      this.$forceUpdate()
    },
    onSubmit() {
      this.confirmLoading = true;
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          (this.isAdd?save(this.form):update(this.form)).then(v=>{
            if(v.ok){
              this.visible = false;
            }else{
              this.$message.error(v.msg||'操作失败')
            }
          }).finally(()=>{
            const parent = this.$parent
            parent.$refs.menuTree.menuTree()
            this.confirmLoading = false;
          })
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields();
    },
    showModal(record,isAdd) {
      this.visible = true;
      if(!isAdd){
        this.form = record
      }else{
        this.form ={isDisable:false}
        this.$nextTick(()=>this.resetForm())
      }
      this.isAdd = isAdd
      menu().then(v=>{
      this.rootMenu = v.data
    })
    },
    handleCancel(e) {
      this.visible = false;
    }
  }
}
</script>

<style>

</style>